<template>
  <div class="search">
    <!-- 头部 -->
    <div class="header">
      <div class="left" @click="back">
        <i class="iconfont iconjiantou2"></i>
      </div>
      <div class="search">
        <van-field
          v-model="keyword"
          clearable
          left-icon="search"
          placeholder="请输入搜索关键字"
        />
      </div>
      <div class="right" @click="search">搜索</div>
    </div>

    <!-- 展示的列表 -->
    <div class="post-list" v-if="postList.length > 0">
      <hm-post @click="$router.push(`/post-detail/${item.id}`)" v-for="item in postList" :key="item.id" :post="item"></hm-post>
    </div>

    <!-- 搜索历史内容部分 -->
    <div class="content" v-else>
      <div class="history">
        <h3>历史记录</h3>
        <ul>
          <li @click="hotSearch(item)" v-for="(item, index) in history" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div class="hot-search">
        <h3>热门搜索</h3>
        <ul>
          <li @click="hotSearch(item)" v-for="(item, index) in hotKeys" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import HmPost from 'components/hm-post.vue'

export default {
  data () {
    return {
      keyword: '',
      // 用于存放搜索结果的数组
      postList: [],
      // 存放热门搜索
      hotKeys: ['说好不哭', '关晓彤', '性感女歌手'],
      // 历史记录数组, 将来这个历史记录是需要从本地读取的
      history: []
    }
  },
  created () {
    const history = JSON.parse(localStorage.getItem('history'))
    if (history) {
      this.history = history
    }
  },
  components: {
    HmPost
  },
  methods: {
    async search () {
      console.log(this.keyword)
      // this.$axios.get(url, config) get请求的参数, 需要在config对象中params配置
      // this.$axios.post(url, data, config) post请求的参数, 直接通过 data 传递即可
      const res = await this.$axios.get('/post_search', {
        params: {
          keyword: this.keyword
        }
      })
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.postList = data
        // 添加前, 应该先将历史数组中, 重复的项移出, 保留和关键字不同的内容
        this.history = this.history.filter(item => item !== this.keyword)
        // 将搜索关键字, 添加到搜索历史数组中去
        this.history.unshift(this.keyword)
        // 把history存到本地
        localStorage.setItem('history', JSON.stringify(this.history))
        console.log(this.postList)
      }
    },
    hotSearch (item) {
      this.keyword = item
      this.search()
    },
    back () {
      // 如果有搜索结果展示, 按返回, 应该显示成搜索历史的状态
      // 如果没有搜索结果展示, 本身就是搜索历史状态, 按返回就是真的返回了
      if (this.postList.length > 0) {
        this.keyword = ''
      } else {
        this.$router.go(-1)
      }
    }
  },
  watch: {
    keyword (value) {
      if (value.trim() === '') {
        this.postList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  line-height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
  .left {
    width: 50px;
    text-align: center;
  }
  .search {
    flex: 1;
    padding-top: 7px;
    .van-field {
      height: 36px;
      line-height: 36px;
      padding: 0 20px;
      border-radius: 18px;
      font-size: 12px;
    }
  }
  .right {
    width: 50px;
    text-align: center;
    font-size: 14px;
  }
}
.content {
  .history,
  .hot-search {
    padding: 10px;
  }
  h3 {
    font-size: 16px;
    font-weight: 700;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 5px 10px;
      font-size: 14px;
    }
  }
}
</style>
